<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />

		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />
		<!-- 表单css -->
		<link rel="stylesheet" href="../css/table.css" />

		<style type="text/css">
			.el-input .el-input__suffix-inner {
				cursor: pointer;
			}

			.serverList-wrapper {
				height: 100%;
				box-sizing: border-box;
			}

			.serverList-content-wrapper {
				min-height: 100%;
				background: #F8F8FF;
				padding: 20px 20px 0px;
				box-sizing: border-box;
			}

			.form-wrapper .button-wrapper {
				padding: 20px 0px;
				border-top: 1px solid #EEEEEE;
			}

			.from-title-wrapper {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.from-title-wrapper .helpdoc {
				color: #6462F3;
				cursor: pointer;
			}

			.from-title a img {
				width: 22px;
				margin-bottom: -3px;
				margin-right: 6px;

			}

			.data-container {
				border-top: 1px solid #eee;
				width: 100%;
				padding: 0 140px;
				box-sizing: border-box;
			}

			.yz-type-title {
				height: 90px;
				margin: 30px auto 0;
			}

			.yz-type-title .yz-step {
				float: left;
				width: 25%;
				color: #777;
				text-align: center;
				position: relative;
			}

			.yz-type-title .yz-step:after {
				content: "";
				width: 100%;
				height: 1px;
				border: 0;
				border-bottom: 2px dotted #c4c4c4;
				position: absolute;
				left: 0;
				top: 6px;
			}

			.yz-type-title .icon-item {
				width: 100%;
				height: 18px;
				margin-bottom: 16px;
			}

			.yz-type-title .icon-item:before {
				content: "";
				position: absolute;
				z-index: 1;
				width: 10px;
				height: 10px;
				background: #fff;
				left: 47.5%;
				border: 3px solid #c4c4c4;
				border-radius: 10px;
			}

			.yz-type-title .step-cur .icon-item:before {
				border-color: #6462F3;
			}

			.yz-type-title .step-cur:after {
				border-bottom: 2px solid #6462F3;
			}

			.yz-type-title .h-sort {
				font-weight: 700;
				line-height: 28px;
			}

			.yz-type-title .p-sort {
				font-size: 16px;
				line-height: 24px;
			}

			.yz-type-title .step-cur {
				color: #6462F3;
			}

			.yz-type-title .step1,
			.yz-type-title .step4 {
				width: 20%;
				text-align: left;
			}

			.yz-type-title .step2,
			.yz-type-title .step3 {
				width: 30%;
			}

			.yz-type-title .step1 .icon-item:before {
				left: 30%;
			}

			.yz-type-title .step4 .icon-item:before {
				left: 65%;
			}

			.yz-type-title .step1 .h-sort {
				margin-left: 25%;
			}

			.yz-type-title .step1 .p-sort {
				margin-left: 15%;
			}

			.yz-type-title .step4 .h-sort {
				margin-left: 60%;
			}

			.yz-type-title .step4 .p-sort {
				margin-left: 56%;
			}

			.form-wrapper .category-wrapper {
				padding-bottom: 19px;
				border-bottom: 1px solid #EEEEEE;
				overflow: auto;
			}

			.form-wrapper .category-wrapper .content-title-h5 {
				float: left;
				line-height: 36px;
				font-size: 16px;
			}

			.form-wrapper .category-wrapper .search-box {
				float: right;
				width: 290px;
				height: 36px;
				border: 1px solid #eee;
				border-radius: 4px;
				line-height: 36px;
				padding-left: 10px;
				color: #999;
			}

			.form-wrapper .type-wrapper {
				overflow: auto;
				padding-top: 20px;
				/* width: 100%; */
				margin: 0 auto;
			}

			.form-wrapper .yz-msx3-box {
				float: left;
				padding: 10px;
				overflow: auto;
				width: 31.806%;
				cursor: pointer;
			}

			.form-wrapper .is-appear {
				border: 1px solid #eee;
				padding: 20px 0;
				border-radius: 4px;
				overflow: auto;
				height: 108px;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				cursor: pointer;
			}

			.form-wrapper .i-icon-box {
				width: 40px;
				height: 40px;
				margin: 10px 20px;
				border-radius: 4px;
				background: #ddd;
				border-right: 1px solid #eee;
			}

			.form-wrapper .p-text-box {
				flex: 1;
				box-sizing: border-box;
				padding: 0 20px;
				position: relative;

			}

			.form-wrapper .p-text-box .linear {
				position: absolute;
				left: 0px;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 1px;
				height: 40px;
				background-color: #EEEEEE;
			}

			.form-wrapper .h5-text {
				font-size: 16px;
				margin-bottom: 10px;
				color: #333;
			}

			.form-wrapper .p10-text {
				line-height: 20px;
				color: #777;
			}

			.table-content-wrapper {
				padding-bottom: 30px;
			}





			.form-wrapper .category-wrapper {
				display: flex;
				justify-content: space-between;
			}

			.form-wrapper .category-wrapper .el-input__icon {
				line-height: 36px;
			}

			.form-wrapper .orderInfo-wrapper {
				margin-top: 25px;
				border-top: 1px solid #EEEEEE;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 20px;

			}

			.form-wrapper .orderInfo-wrapper .orderInfo-content-wrapper {
				width: 80%;
				justify-content: space-between;
				margin-left: 20px;
			}



			.form-wrapper .orderInfo-wrapper .orderInfo-content-item .title {
				font-size: 14px;
				color: #777777;
			}

			.form-wrapper .orderInfo-wrapper .orderInfo-content-item .val {
				font-size: 16px;
			}

			.form-wrapper .orderInfo-wrapper .yzButton {
				width: 90px;
				height: 40px;
				background: #6462F3;
				border-radius: 4px;
				color: #FFFFFF;
			}

			.from-title-wrapper.haveBottomBorder {
				border-bottom: 1px solid #EEEEEE;
			}

			.liaotianRecord-wrapper .liaotianRecord {
				padding-bottom: 53px;
				padding-left: 20px;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #EEEEEE;
			}

			.liaotianRecord-wrapper .liaotianRecord .cordTime {
				font-size: 12px;
				color: #777777;
				padding-top: 20px;
			}

			.liaotianRecord-wrapper .liaotianRecord .liaotianRecord-content {
				position: relative;
				padding-top: 20px;
			}

			.liaotianRecord-wrapper .liaotianRecord .liaotianRecord-content .flag {
				display: none;
				width: 40px;
				height: 40px;
				position: absolute;
				left: 0;
				top: 0;
				background: url(../img/returnflag.png) no-repeat center;

			}

			.liaotianRecord-wrapper .liaotianRecord.response .liaotianRecord-content .flag {
				display: block;
			}

			.liaotianRecord-wrapper .liaotianRecord .content-wrapper .personPhoto {
				width: 50px;
				height: 50px;
				background-color: #EEEEEE;
				border-radius: 50%;
				margin-right: 10px;
			}

			.liaotianRecord-wrapper .liaotianRecord.response .content-wrapper {
				padding-left: 20px;
			}

			.liaotianRecord-wrapper .liaotianRecord .content-wrapper .liaotianRecord-content-inner .title {
				color: #777777;
				margin-bottom: 10px;
				margin-top: 10px;
			}

			.liaotianRecord-wrapper .liaotianRecord .content-wrapper .liaotianRecord-content-inner .img {
				margin-top: 30px;
			}

			.form-wrapper .yzButton.returnButton {
				width: 160px;
				height: 40px;
				background: #6462F3;
				border-radius: 4px;
				color: #FFFFFF;
				margin-top: 20px;

			}
			
			.form-wrapper .addAdjunct {
				display: flex;justify-content: flex-start;
			}
			
			.form-wrapper .addAdjunct .el-form-item__content {
				margin-left: 0px !important;
			}
			.upload-demo .el-button {
				
				border: 1px solid #6462F3 !important;
				color: #6462F3 !important;
			}
			.upload-demo .el-button:hover {
				background-color: #fff !important;
			}
			
			.upload-demo .el-button:focus {
				background-color: #fff !important;
			}
			
			
		</style>




	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div class="orderSubmit-wrapper table-wrapper section" v-cloak>
			<div class="orderSubmit-content-wrapper table-content-wrapper">
				<div class="serverListNav">
					<span class="nav-item">总览</span>
					<span class="nav-item">我的工单</span>
					<span @click="gotoOrderRecord" class="nav-item">工单记录</span>
					<span class="nav-item">工单详情</span>
				</div>

				<div class="form-wrapper ">
					<div class="from-title-wrapper">
						<span @click="gotoOrderRecord"  class="from-title"><i class="icon el-icon-back"></i>工单记录</span>
						<span class="helpdoc">帮助文档>></span>
					</div>

					<div class="data-container">
						<div class="yz-type-title">
							<div class="yz-step step1 step-cur">
								<div class="icon-item"></div>
								<p class="h-sort">Step.1</p>
								<p class="p-sort">工单待处理</p>
							</div>

							<div :class="{'step-cur':orderHandleCurrentStep > 1}" class="yz-step step2">
								<div class="icon-item"></div>
								<p class="h-sort">Step.2</p>
								<p class="p-sort">工单处理中</p>
							</div>

							<div :class="{'step-cur':orderHandleCurrentStep > 2}" class="yz-step step3">
								<div class="icon-item"></div>
								<p class="h-sort">Step.3</p>
								<p class="p-sort">工单已处理</p>
							</div>

							<div :class="{'step-cur':orderHandleCurrentStep > 3}" class="yz-step step4">
								<div class="icon-item"></div>
								<p class="h-sort">Step.4</p>
								<p class="p-sort">评价</p>
							</div>
						</div>
					</div>
					<div class="orderInfo-wrapper">
						<div class="orderInfo-content-wrapper  fboxRow">
							<div class="orderInfo-content-item">
								<span class="title">工单编号：</span>
								<span class="val">{{orderInfo.id}}</span>
							</div>
							<div class="orderInfo-content-item">
								<span class="title">问题标题：</span>
								<span class="val">{{orderInfo.probelmTitle}}</span>
							</div>
							<div class="orderInfo-content-item">
								<span class="title">提交时间：</span>
								<span class="val">{{orderInfo.submitTime}}</span>
							</div>
							<div class="orderInfo-content-item">
								<span class="title">工单状态：</span>
								<span class="val" v-html="handlestatus(orderInfo)">{{orderInfo.id}}</span>
							</div>
						</div>
						<div v-if="orderHandleCurrentStep === 1 || orderHandleCurrentStep === 2" @click="handleClickCloseOrder" class="yzButton">关闭工单</div>
						<div v-if="orderHandleCurrentStep === 3" @click="handleClickEvaluateOrder" class="yzButton">评价</div>
					</div>

				</div>

				<div class="form-wrapper ">
					<div class="from-title-wrapper haveBottomBorder">
						<span class="from-title">聊天记录</span>
					</div>
					<div class="liaotianRecord-wrapper">
						<div class="liaotianRecord">
							<div class="liaotianRecord-content">
								<i class="flag"></i>
								<div class="content-wrapper fboxRow">
									<i class="personPhoto"></i>
									<div class="liaotianRecord-content-inner">
										<p class="title">小樱</p>
										<p class="content">鸣人，快回木叶村</p>
										<img class="img" src="../img/systemIcon/LAMP.png" />
									</div>
								</div>
							</div>
							<span class="cordTime">2020-12-02 09:35:34</span>
						</div>
						<div class="liaotianRecord  response">
							<div class="liaotianRecord-content">
								<i class="flag"></i>
								<div class="content-wrapper fboxRow">
									<i class="personPhoto"></i>
									<div class="liaotianRecord-content-inner">
										<p class="title">衡天云客服</p>
										<p class="content">好的，老弟</p>
									</div>
								</div>
							</div>
							<span class="cordTime">2020-12-02 09:35:34</span>
						</div>
						<div class="liaotianRecord">
							<div class="liaotianRecord-content">
								<i class="flag"></i>
								<div class="content-wrapper fboxRow">
									<i class="personPhoto"></i>
									<div class="liaotianRecord-content-inner">
										<p class="title">小樱</p>
										<p class="content">木叶飞舞之处 火亦生生不息</p>
									</div>
								</div>
							</div>
							<span class="cordTime">2020-12-02 09:35:34</span>
						</div>
					</div>
					<div v-if="!showAskquestion  && orderHandleCurrentStep < 3" @click="handleClickAskquestion" class="yzButton  returnButton">提问</div>
				</div>


				<div v-if="showAskquestion" class="form-wrapper anmation">
					<el-form class="fboxCol" ref="form" :model="form" :rules="rules" label-width="100px">
						<el-form-item style="width: 650px;" label="问题描述" prop="problemDesc">
							<el-input type="textarea" placeholder="请输入文字描述您所遇到的问题" v-model="form.problemDesc" maxlength="200" :autosize="{ minRows: 4}"
							 show-word-limit>
							 </el-input>
						</el-form-item>
						<el-form-item  class="addAdjunct" label="添加附件" prop="addAdjunct">
							<el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" limit="5"
							 multiple="true" :on-preview="handlePreview" :on-remove="handleRemove" :on-exceed="handleExceed" :file-list="fileList"
							 list-type="picture" :auto-upload="false">
								<el-button slot="trigger" size="small">选取文件</el-button>
								<div slot="tip" class="el-upload__tip">
									最大可上传5个附件 <span style="color: #6462F3;margin-left: 5px;">上传的附件支持的格式有:'jpg','png'</span> </div>
							</el-upload>
						</el-form-item>
					</el-form>
					<div @click="submitForm('form')" class="yzButton returnButton">提交提问</div>
				</div>








			</div>


		</div>

		<script type="application/javascript" src="../js/util.js"></script>
		<!-- vue  -->
		<script>
			let vmServerList = new Vue({

				el: '.orderSubmit-wrapper',
				data: function() {
					return {
						rules: {
							problemDesc: [{
								required: true,
								message: '请填写问题描述',
								trigger: 'blur'
							}, ],
						},

						
						form: {    // 提问表单数据
							problemDesc: '',
						},
						orderHandleCurrentStep: 1,
						orderInfo: {
							id: '0123456789', // 工单编号
							probelmTitle: '新年快乐呀！', // 问题标题
							submitTime: '2020-12-01  15:16:32', // 提交时间
							status: 'handling' // 工单状态
						},
						showAskquestion: false, // 是否展示提问
						fileList :[], // 附件上传列表  默认为空
						serverResponseStatus: false, // 客服回复状态
					}
				},

				methods: {
					// 评价工单的方法
					handleClickEvaluateOrder: _throttle(function() {
						window.open('orderEvaluate.html?id=' + this.orderInfo.id + '&probelmTitle='+ this.orderInfo.probelmTitle, '_self')
					}),
					
					
					//提交提问
					submitForm: _throttle(function(formName) {
						this.$refs[formName].validate(function(valid){
						          if (valid) {
									 console.log('表单通过了校验');
									 window.location.reload()
						          } else {
						            console.log('表单没有通过校验');
						            return false;
						          }
						        });
					}),

					handleRemove: function(file, fileList) {
						console.log(file, fileList);
					},
					handlePreview: function(file) {
						console.log(file);
					},
					// 超出数量限制限制 回调函数
					handleExceed: function(files, fileList) {
						totalNum =  files.length + fileList.length
						this.$message.error('当前限制选择 5 个文件，本次选择了' + files.length + '个文件，共选择了'+  totalNum  + '个文件');
					},

					// 跳转到工单记录页面
					gotoOrderRecord: _throttle(function() {
						window.open('index.html', '_self')
					}),
					// 关闭工单
					handleClickCloseOrder: _throttle(function() {
						// 关闭工单时，结束提问
						this.showAskquestion = false
						
						this.orderHandleCurrentStep = 3
					}),
					// 点击提问
					handleClickAskquestion: _throttle(function() {
						this.showAskquestion = true
						
						var Top = $(window).scrollTop();
						$("body,html").animate({
							scrollTop: Top + 300
						})
					}),

					//处理状态
					handlestatus: function(row) {
						//  运行中 alive   启动中 start   关机中 closing;  已关机  closed;   timeout  已过期; 重启中 restarting；释放 release；
						switch (row.status) {
							case 'waithandle':
								return '<span style="color:#FF9416">未处理</span>'
							case 'handling':
								return '<span style="color:#3FBF70">处理中</span>'
							case 'alreadyhandle':
								return '<span>已处理</span>'
							case 'alreadyestimate':
								return '<span style="color:#6462F3">已评价</span>'
							default:
								break;
						}

					},

				},
				mounted: function() {
						if(this.serverResponseStatus) {
							this.orderHandleCurrentStep = 2
						}
						// 逻辑 处于工单处理中时 若客服没有回复   半小时后 自动关闭工单
				}

			})
		</script>
	</body>
</html>
